<template>
    <el-card class="profile-card">
      <h2>个人信息</h2>
      <el-descriptions v-if="userInfo" :title="roleMap[userRole] + '信息'" :column="1" border>
        <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
        <el-descriptions-item label="角色">{{ roleMap[userRole] }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ statusMap[userStatus] }}</el-descriptions-item>
        <template v-if="userRole === 'STUDENT'">
          <el-descriptions-item label="姓名">{{ userInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ genderMap[userInfo.gender] }}</el-descriptions-item>
          <el-descriptions-item label="出生日期">{{ userInfo.birthDate }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
          <el-descriptions-item label="院校">{{ userInfo.school }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{ userInfo.major }}</el-descriptions-item>
          <el-descriptions-item label="学历">{{ userInfo.degree }}</el-descriptions-item>
          <el-descriptions-item label="毕业时间">{{ userInfo.graduateDate }}</el-descriptions-item>
          <el-descriptions-item label="项目经历">{{ userInfo.projectExperience }}</el-descriptions-item>
          <el-descriptions-item label="获奖情况">{{ userInfo.award }}</el-descriptions-item>
          <el-descriptions-item label="证书">{{ userInfo.certificate }}</el-descriptions-item>
        </template>
        <template v-else-if="userRole === 'ENTERPRISE'">
          <el-descriptions-item label="企业名称">{{ userInfo.enterpriseName }}</el-descriptions-item>
          <el-descriptions-item label="所属行业">{{ userInfo.industry }}</el-descriptions-item>
          <el-descriptions-item label="企业规模">{{ userInfo.scale }}</el-descriptions-item>
          <el-descriptions-item label="企业地址">{{ userInfo.address }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ userInfo.contact }}</el-descriptions-item>
        </template>
        <template v-else-if="userRole === 'ADMIN'">
          <el-descriptions-item label="管理员ID">{{ userInfo.id }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
        </template>
      </el-descriptions>
      <el-button type="primary" class="mt-2" @click="showPwd = true">修改密码</el-button>
      <EditPassword v-model:visible="showPwd" />
    </el-card>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { UserRoleMap, UserStatusMap } from '@/utils/enum'
import EditPassword from './EditPassword.vue'

const userStore = useUserStore()
const showPwd = ref(false)
const userInfo = computed(() => userStore.userInfo)
const userRole = computed(() => userStore.role)
const userStatus = computed(() => userInfo.value?.status || 'NORMAL')
const roleMap = UserRoleMap
const statusMap = UserStatusMap
const genderMap = {
  0: '男',
  1: '女'
}

onMounted(async () => {
  if (!userInfo.value) {
    await userStore.fetchUserInfo()
  }
})
</script>

<style scoped>
.profile-card {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px 20px;
}
</style> 